<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh">
<head>
    <base href="${pageContext.request.contextPath}/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>首页 - 光年(Light Year Admin)后台管理系统模板</title>

    <link href="js/bootstrap-validator/css/bootstrapValidator.css" rel="stylesheet">
</head>

<body data-theme="default">
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <jsp:include page="common.jsp"/>
        <!--左侧导航-->

        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-toolbar clearfix">
                                <form class="pull-right search-bar" method="get" action="#!" role="form">
                                    <div class="input-group">

                                        <input type="text" class="form-control" id="gnameInput" placeholder="请输入名称" oninput="findAllPage(1)">
                                    </div>
                                </form>
                                <form class="pull-right search-bar" method="get" action="#!" role="form">
                                    <div class="input-group">

                                        <input type="text" class="form-control" id="gnumInput" placeholder="请输入版号" oninput="findAllPage(1)">
                                    </div>
                                </form>
                                <div class="toolbar-btn-action">
                                    <button id="addBtn" onclick="showAdd()" type="button" class="btn btn-primary m-r-5" href="#!"><i class="mdi mdi-plus"></i> 新增</button>

                                </div>

                                <div class="card-body">

                                    <div class="table-responsive" id="games-table">


                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加游戏</h4>
            </div>
            <div class="modal-body">
                <form id="AddFrom" class="form-horizontal" action="lyear_forms_elements.html" method="post" onsubmit="return false;">
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="gnameadd">游戏名</label>
                        <div class="col-md-7">
                            <input class="form-control" type="text" id="gnameadd" name="gnameadd" placeholder="请输入游戏名">
                        </div>
                    </div>
                    <%--<div class="form-group">--%>
                    <%--    <label class="col-md-3 control-label" for="eageadd">员工年龄</label>--%>
                    <%--    <div class="col-md-7">--%>
                    <%--        <input class="form-control" type="text" id="eageadd" name="eageadd" placeholder="请输入员工年龄">--%>
                    <%--    </div>--%>
                    <%--</div>--%>
                    <div class="form-group">
                        <label class="col-md-3 control-label"  >是否感兴趣</label>
                        <div class="col-md-7">
                            <input  type="radio" id="interest"  name="interestadd" value="感兴趣" > <P for="interest">感兴趣</P>


                            <input  type="radio" id="nointerest" name="interestadd" value="不感兴趣"> <p for="nointerest">不感兴趣</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="gtypeadd">游戏类型</label>
                        <div class="col-md-7">
                            <input class="form-control" type="text" id="gtypeadd" name="gtypeadd" placeholder="请输入游戏类型">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="reldateadd">入职日期</label>
                        <div class="col-md-7">
                            <input id="reldateadd" class="form-control js-datepicker m-b-10" type="text" id="example-datepicker" name="reldateadd" placeholder="yyyy-mm-dd" value="" data-date-format="yyyy-mm-dd">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="revenueadd">营收</label>
                        <div class="col-md-7">
                            <input class="form-control" type="text" id="revenueadd" name="revenueadd" placeholder="请输入营收">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" >游戏平台</label>
                        <div class="col-md-7" id="employ-dar-select">

                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="addGames()">确定</button>
            </div>
        </div>
    </div>
</div>

<%--修改模态框--%>
<div class="modal fade" id="UpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="ModalLabel">修改游戏</h4>
            </div>
            <div class="modal-body">
                <form id="UpdateFrom" class="form-horizontal" action="lyear_forms_elements.html" method="post" onsubmit="return false;">
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="gnumUpdate">游戏版号</label>
                        <div class="col-md-7">
                            <input class="form-control" type="text" id="gnumUpdate" name="gnumUpdate" placeholder="请输入游戏版号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="gnameUpdate">游戏名</label>
                        <div class="col-md-7">
                            <input class="form-control" type="text" id="gnameUpdate" name="gnameUpdate" placeholder="请输入游戏名">
                        </div>
                    </div>
                    <%--<div class="form-group">--%>
                    <%--    <label class="col-md-3 control-label" for="eageUpdate">员工年龄</label>--%>
                    <%--    <div class="col-md-7">--%>
                    <%--        <input class="form-control" type="text" id="eageUpdate" name="eageUpdate" placeholder="请输入员工年龄">--%>
                    <%--    </div>--%>
                    <%--</div>--%>
                    <div class="form-group">
                        <label class="col-md-3 control-label"  >兴趣程度</label>
                        <div class="col-md-7">
                            <input  type="radio"  id="interests"  name="interestUpdate" value="感兴趣" > <P for="interests">感兴趣</P>


                            <input  type="radio" id="nointerests" name="interestUpdate" value="不感兴趣"> <p for="nointerests">不感兴趣</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="gtypeUpdate">游戏类型</label>
                        <div class="col-md-7">
                            <input class="form-control" type="text" id="gtypeUpdate" name="gtypeUpdate" placeholder="请输入游戏类型">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="reldateUpdate">上市日期</label>
                        <div class="col-md-7">
                            <input id="reldateUpdate" class="form-control js-datepicker m-b-10" type="text"  name="reldateUpdate" placeholder="yyyy-mm-dd" value="" data-date-format="yyyy-mm-dd">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="revenueUpdate">营收</label>
                        <div class="col-md-7">
                            <input class="form-control" type="text" id="revenueUpdate" name="revenueUpdate" placeholder="请输入营收">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" >游戏平台名称</label>
                        <div class="col-md-7" id="employ-dar-selectq">

                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="updateGames()">确定</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/bootstrap-validator/js/bootstrapValidator.js"></script>

<script type="text/html" id="all_games">
    <table class="table table-hover" >

        <tr>
            <th>id</th>
            <th>游戏版号</th>
            <th>游戏名</th>

            <th>游戏感兴趣程度</th>
            <th>游戏类型</th>
            <th>发行日期</th>
            <th>营收工资</th>
            <th>上架情况</th>
            <th>发行平台名称</th>
            <th>操作</th>

        </tr>


        {{each data.list}}
        <tr>
            <th scope="row">{{$value.gid}}</th>
            <td>{{$value.gnum}}</td>
            <td>{{$value.gname}}</td>
            <%--<td>{{$value.eage}}</td>--%>
            <td>{{$value.interest}}</td>
            <td>{{$value.gtype}}</td>
            <td>{{$value.reldate}}</td>
            <td>{{$value.revenue}}</td>
            <td>

                {{if $value.estate == '1'}}
                <span class="label label-primary">上架</span>
                {{else}}
                <span class="label label-default">下架</span>
                {{/if}}
                <%--{{$value.estate}}--%>
            </td>
            <td>{{$value.gamingPlatform.planame}}</td>
            <td>
                {{if $value.estate == '1'}}
                <button type="button" class="btn btn-info btn-xs" onclick="showUpdate('{{$value.gid}}')">修改</button>
                <button type="button" class="btn btn-danger btn-xs" onclick="dalete('{{$value.gid}}','{{data.pageNum}}')" >下架</button>
                {{else}}
                <button type="button" class="btn btn-info btn-xs" disabled="disabled"  >修改</button>
                <button type="button" class="btn btn-danger btn-xs"  disabled="disabled">下架</button>
                {{/if}}

            </td>
        </tr>
        {{/each}}


    </table>
    <nav class="text-center">
        <ul class="pagination pagination-circle">
            <%--上一页--%>
            {{if data.hasPreviousPage }}
            <li ><a href="javascript:void(0)" onclick="findAllPage('{{data.pageNum-1}}')"><span><i class="mdi mdi-chevron-left"></i></span></a></li>
            {{else}}
            <li class="disabled"><a href="javascript:void(0)" ><span><i class="mdi mdi-chevron-left"></i></span></a></li>
            {{/if}}
            <%--标签--%>
            {{each data.navigatepageNums }}
            {{if $value == data.pageNum}}
            <li class="disabled active"><a href="javascript:void(0)" >{{$value}}</a></li>
            {{else}}
            <li><a href="javascript:void(0)" onclick="findAllPage('{{$value}}')">{{$value}}</a></li>
            {{/if}}
            {{/each}}
            <%--  下一页--%>
            {{if data.hasNextPage}}
            <li><a href="javascript:void(0)" onclick="findAllPage('{{data.pageNum+1}}')"><span><i class="mdi mdi-chevron-right"></i></span></a></li>
            {{else}}
            <li class="disabled"><a href="javascript:void(0)" ><span><i class="mdi mdi-chevron-right"></i></span></a></li>
            {{/if}}

        </ul>
    </nav>
</script>
<script type="text/html" id="example-select">
    <select class="form-control"  id="plaidadd" name="plaidadd" size="1">
        {{each data}}

        <option value="{{$value.plaid}}" >{{$value.planame}}</option>
        {{/each}}
    </select>
</script>

<script type="text/html" id="example-select2">
    <select class="form-control"  id="plaidUpdate" name="plaidUpdate" size="1">
        {{each data}}

        <option value="{{$value.plaid}}" >{{$value.planame}}</option>
        {{/each}}
    </select>
</script>
<script type="text/javascript">

    $("#UpdateFrom").bootstrapValidator({
        feedbackIcons: {//这里是用来对应三种不同状态时，在输入框后面添加的图标
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {//哪些字段需要验证，和html中的输入框，下拉框等等表单name属性所对应。
            gnumUpdate: {
                validators: {//从这里也可以容易的看出可以有多个验证信息
                    notEmpty: {//非空验证
                        message: "请输入游戏版号！！！" //提示信息，当你不写这里时它会自动的调用自带的提示信息，默认是英文，可导入language下的中文JS文件
                    },
                    stringLength: {//长度限制（中文字符也算一个）
                        min: 1,
                        max: 5,
                        message: "版号长度只能在1到5位之间！！！"
                    }
                }
            },
            gnameUpdate: {
                validators: {
                    notEmpty: {
                        message: "请输入游戏名称！！！"
                    },
                    stringLength: {//长度限制（中文字符也算一个）
                        min: 1,
                        max: 20,
                        message: "游戏名称长度只能在1到20位之间！！！"
                    }
                }
            },
            interestUpdate: {
                validators: {
                    notEmpty: {
                        message: "请选择感兴趣程度！！！"
                    }
                }
            },
            gtypeUpdate: {
                validators: {
                    notEmpty: {
                        message: "请输入游戏类型！！！"
                    }
                }
            },
            revenueUpdate: {
                validators: {
                    notEmpty: {
                        message: "请输入游戏创造的营收！！！"
                    },
                    regexp: {//长度限制（中文字符也算一个）
                        regexp: /^\d{0,10}$/,
                        message: "营收数字长度只能在1到10位之间！！！"
                    }
                }
            }
        }})
    $("#AddFrom").bootstrapValidator({
        feedbackIcons: {//这里是用来对应三种不同状态时，在输入框后面添加的图标
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {//哪些字段需要验证，和html中的输入框，下拉框等等表单name属性所对应。
            gnameadd: {
                validators: {//从这里也可以容易的看出可以有多个验证信息
                    notEmpty: {//非空验证
                        message: "请输入游戏名称！！！" //提示信息，当你不写这里时它会自动的调用自带的提示信息，默认是英文，可导入language下的中文JS文件
                    },
                    stringLength: {//长度限制（中文字符也算一个）
                        min: 1,
                        max: 20,
                        message: "游戏名称长度只能在1到20位之间！！！"
                    }
                }
            },
            interestadd: {
                validators: {
                    notEmpty: {
                        message: "请选择感兴趣程度！！！"
                    }
                }
            },
            gtypeadd: {
                validators: {
                    notEmpty: {
                        message: "请输入游戏类型！！！"
                    }
                }
            },
            // reldateadd: {
            //     validators: {
            //         notEmpty: {
            //             message: "请输入游戏平台所属公司位置！！！"
            //         }
            //     }
            // },
            revenueadd: {
                validators: {
                    notEmpty: {
                        message: "请输入游戏创造的营收！！！"
                    },
                    regexp: {//长度限制（中文字符也算一个）
                        regexp: /^\d{0,10}$/,
                        message: "营收数字长度只能在1到10位之间！！！"
                    }
                }
            }
        }})
    var gidupdate = 0;
    //按钮添加
    function addGames(){
        $("#AddFrom").data('bootstrapValidator').validate();//相当于触发一次所有的验证
        if($("#AddFrom").data('bootstrapValidator').isValid()){
        var serialize = $("#AddFrom").serialize();
        console.log(serialize)
            var formData1 = {

                gname: $("#gnameadd").val(),
                interest: $("input[name='interestadd']:checked").val(),
                gtype: $("#gtypeadd").val(),
                reldate: $("#reldateadd").val(),
                revenue: $("#revenueadd").val(),
                plaid: $("#plaidadd").val()
            };
        $.ajax({
            url:"admin/GamesController",
            type:'POST',
            data:JSON.stringify(formData1),
            contentType:"application/json;charset=utf-8",
            dataType:'JSON',
            success:function (resp){
                console.log($("#AddFrom").serialize())
                if(resp.code==10000){
                    $("#addModal").modal("hide")
                    //清空数据
                    $("#AddFrom")[0].reset();
                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                    findAllPage(1);
                }else{
                    lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
                }
            }
        })}
    }
    //删除数据
    function dalete(gid, pageNum){
        $.alert({
            title: '删除',
            content: '您确认要删除吗',
            buttons: {
                confirm: {
                    text: '确认',
                    btnClass: 'btn-primary',
                    action: function(){

                        $.ajax({
                            url:"admin/GamesController/" + gid,
                            type:'POST',
                            data:{gid:gid},
                            dataType:'JSON',
                            success:function (resp){
                                if(resp.code==10000){
                                    console.log(resp)

                                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );

                                    findAllPage(pageNum);
                                }else{
                                    lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
                                }
                            }
                        })
                    }
                },
                cancel: {
                    text: '取消'
                }
            }
        });

    }
    function showAdd(){

        $.ajax({
            url:"admin/GamingPlatformController/findAll",
            type:'GET',
            dataType:'JSON',
            success:function (resp){
                if(resp.code==10000){
                    console.log(resp)
                    //渲染数据
                    let sel = template('example-select', {data:resp.data});
                    //挂在
                    $("#employ-dar-select").html(sel);
                    $("#addModal").modal("show")

                }else{
                    lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
                }
            }
        });
    }
    function updateGames(){
        $("#UpdateFrom").data('bootstrapValidator').validate();//相当于触发一次所有的验证
        if($("#UpdateFrom").data('bootstrapValidator').isValid()){
            var formData = {
                gid: gidupdate,
                gnum: $("#gnumUpdate").val(),
                gname: $("#gnameUpdate").val(),
                interest: $("input[name='interestUpdate']:checked").val(),
                gtype: $("#gtypeUpdate").val(),
                reldate: $("#reldateUpdate").val(),
                revenue: $("#revenueUpdate").val(),
                plaid: $("#plaidUpdate").val()
            };

            console.log(formData);
        var serialize = $("#UpdateFrom").serialize();
        console.log(serialize)
        console.log("gid=" + gidupdate + "&" + serialize)
        $.ajax({
            url:"admin/GamesController",
            type:'PUT',
            data: JSON.stringify(formData),
            contentType: "application/json;charset=utf-8",
            dataType:'JSON',
            success:function (resp){
                if(resp.code==10000){
                    console.log(serialize)
                    $("#UpdateModal").modal("hide")
                    //清空数据
                    $("#UpdateFrom")[0].reset();
                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                    findAllPage(1)
                }else{
                    lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
                }
            }
        })}
    }

    function showUpdate(gid){

        $.ajax({
            url:"admin/GamingPlatformController/findAll",
            type:'GET',

            dataType:'JSON',
            success:function (resp){
                $.ajax({
                    url:"admin/GamesController/" + gid,
                    type:'GET',

                    dataType:'JSON',
                    success:function (resp){
                        gidupdate = resp.data.gid
                        if(resp.code==10000) {
                            console.log(resp.data)
                            $("#gnumUpdate").val(resp.data.gnum)
                            $("#gnameUpdate").val(resp.data.gname)
                            // $("#eageUpdate").val(resp.data.eage)
                            $("#interestUpdate").text(resp.data.interest)
                            if (resp.data.interest == "感兴趣"){
                                $("#interests").prop("checked" ,true)
                            }else {
                                $("#nointerests").prop("checked" ,true)
                            }
                            $("#gtypeUpdate").val(resp.data.gtype)
                            //$("#eentrydateUpdate").val(resp.data.eentrydate)
                            var relDate = new Date(resp.data.reldate);
                            var formattedDate = relDate.getFullYear() + '-' + ('0' + (relDate.getMonth() + 1)).slice(-2) + '-' + ('0' + relDate.getDate()).slice(-2);
                            $("#reldateUpdate").val(formattedDate);
                            $("#revenueUpdate").val(resp.data.revenue)
                            $("#UpdateFrom select option[value = '"+ resp.data.plaid +"']").prop("selected",true)
                            $("#updateModal").modal("show")
                        }else{
                            lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
                        }
                    }
                })
                if(resp.code==10000){

                    console.log(resp)
                    //渲染数据
                    let sel = template('example-select2', {data:resp.data});
                    //挂在
                    $("#employ-dar-selectq").html(sel);
                    $("#UpdateModal").modal("show")

                }else{
                    lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
                }
            }
        });
    }
    function UpdateEmployee(){
        var serialize = $("#UpdateFrom").serialize();
        console.log(serialize)
        $.ajax({
            url:"admin/GamesController?action=upEmployee",
            type:'POST',
            data:$("#UpdateFrom").serialize(),
            dataType:'JSON',
            success:function (resp){
                if(resp.code==10000){
                    $("#UpdateModal").modal("hide")
                    //清空数据
                    $("#UpdayeFrom")[0].reset();
                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                    findAllPage(1);
                }else{
                    lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
                }
            }
        })
    }


    function findAllPage(pagecou){
        //发送ajax请求
        $.ajax({
            url:"admin/GamesController/page",
            type:'GET',
            dataType:'JSON',
            data: {pagecou:pagecou,gname:$("#gnameInput").val(),gnum:$("#gnumInput").val()},
            success:function (resp){
                console.log(resp.data)
                //渲染数据
                let table = template('all_games', {data:resp.data});
                console.log(resp.data.pageNum)
                //挂在
                $("#games-table").html(table);
            }
        });
    }
    findAllPage(1)
</script>
</body>
</html>
